<template>
  <div class="taBar">
    <van-tabbar
      v-model="select"
      active-color="#f00"
      inactive-color="#000"
      fixed
      @change="changeTabbar"
    >
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">分类</van-tabbar-item>
      <van-tabbar-item
        v-if="$store.getters.getBge > 0"
        icon="friends-o"
        :badge="$store.getters.getBge"
      >购物车</van-tabbar-item>
      <van-tabbar-item v-else icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      select: this.active, //选中的索引
    };
  },
  // created() {
  //   this.select = this.active;
  // },
  methods: {
    changeTabbar(index) {
      if (index === 0) {
        this.$router.push("/").catch(() => {});
      } else if (index === 1) {
        this.$router.push("/category").catch(() => {});
      } else if (index === 2) {
        this.$router.push("/shopcart").catch(() => {});
      } else if (index === 3) {
        this.$router.push("/user").catch(() => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>